<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="{{url('bootstrap/css/bootstrap.min.css')}}" rel="stylesheet">

    <style>
        *{margin:0;
            padding:0;
            list-style:none;}
        .wrap{height:170px;
            width:490px;
            margin:60px auto;
            overflow: hidden;
            position: relative;
            margin:100px auto;}
        .wrap ul{position:absolute;}
        .wrap ul li{height:170px;}
        .wrap ol{position:absolute;
            right:40px;
            bottom:40px;}
        .wrap ol li{height:20px; width: 20px;
            background:#ccc;
            border:solid 1px #666;
            margin-left:5px;
            color:#000;
            float:left;
            line-height:center;
            text-align:center;
            cursor:pointer;}
        .wrap ol .on{background:#E97305;
            color:#fff;}

    </style>
    <script type="text/javascript">
        window.onload=function(){
            var wrap=document.getElementById('wrap'),
                pic=document.getElementById('pic').getElementsByTagName("li"),
                list=document.getElementById('list').getElementsByTagName('li'),
                index=0,
                timer=null;

            // 定义并调用自动播放函数
            timer = setInterval(autoPlay, 2000);

            // 鼠标划过整个容器时停止自动播放
            wrap.onmouseover = function () {
                clearInterval(timer);
            }

            // 鼠标离开整个容器时继续播放至下一张
            wrap.onmouseout = function () {
                timer = setInterval(autoPlay, 2000);
            }
            // 遍历所有数字导航实现划过切换至对应的图片
            for (var i = 0; i < list.length; i++) {
                list[i].onmouseover = function () {
                    clearInterval(timer);
                    index = this.innerText - 1;
                    changePic(index);
                };
            };

            function autoPlay () {
                if (++index >= pic.length) index = 0;
                changePic(index);
            }

            // 定义图片切换函数
            function changePic (curIndex) {
                for (var i = 0; i < pic.length; ++i) {
                    pic[i].style.display = "none";
                    list[i].className = "";
                }
                pic[curIndex].style.display = "block";
                list[curIndex].className = "on";
            }

        };

    </script>
</head>
<body>
<div class="wrap" id='wrap' style="width:200px;margin: auto;height:300px;">
    <ul id="pic">
    @foreach($result as $v)
            <a href="">
                <li><img src="{{url($v->img)}}" alt="" width="200px" height="300px"></li>
            </a>
    @endforeach
    </ul>
    <ol id="list">
        @foreach($result as $v)
            <li class="on"><span class="glyphicon glyphicon-hand-up"></span></li>
        @endforeach
    </ol>
</div>
</body>
</html>
